<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    
   	    <div class="calc">
            <ul>
        	      <li>
        	        <label>用户名：</label>
        	        <input id="loginname" type="text" >
        	      </li>
        	      <li>
        	        <label>密&nbsp;&nbsp;&nbsp;码： </label>
        	        <input type="text" id="nloginpwd" placeholder="密码">
        	      </li>
        	      <li>
        	        <div type='button' id='btn'>提交</div>
        	      </li>
        	    </ul>
        	  </div>
        	</body>
        	</html>
       
          <script>
               //定义构造函数   
         var zifu = function(){};
           zifu.prototype.idone = function (id)
           {
               return document.getElementById(id);
           }  

              zifu.prototype.leftone=function(str)
              {
                  return str.replace(/(\s*$)/g," ");
              }
           
               zifu.prototype.trim = function (str)
               {
                   return str.replace(/(^\s*)|(\s*$)/g," ")
               }

             //对象的实例化
             zifuk = new zifu();
          
             //调用返回对象元素
             var btn  = zifuk.idone("btn");
             btn.onclick = function()
             {
                 //alert($("#loginname").val())
                 var s = $("#loginname").val();
                 var username = zifuk.leftone(s);
                 console.log("用户名"+username)
                 var username1 = zifuk.trim(s);
                 console.log("用户名"+username1)
             } 

          </script>
</body>
</html>